<template>
  <el-menu mode="vertical">
    <el-menu-item v-for="menu in menuList" :key="menu.id">
      <div
        class="flex-between w-100"
        @mouseenter="menu.active = true"
        @mouseleave="menu.active = false"
      >
        <div class="animated flex-1" :class="[(menu.active && 'slideInLeft') || '']">
          <el-icon>
            <component :is="menu.icon"></component>
          </el-icon>
          <span>{{ menu.name }}</span>
        </div>
        <div class="animated " :class="[(menu.active && 'slideInRight') || '']" v-if="menu.count">
          {{ menu.count }}
        </div>
      </div>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
interface menuItem {
  id: string | number
  name: string
  icon?: string
  count?: number
  active?: boolean
}
const menuList: menuItem[] = reactive([
  { id: 1, name: '首页', count: 10 },
  { id: 2, name: '关于' },
  { id: 3, name: '分类' },
  { id: 4, name: '标签' }
])
</script>

<style lang="" scoped></style>
